<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script type="module">
    import {a,addA} from "../js/md1.js";
    import {b,addB} from "../js/md2.js";
    import {c,getC} from "../js/md3.js";

    import {A,B,C} from "../js/md4.js";

    // 先对应变量名或函数名引入,在自定义变量名或函数名引入 => 不会影响模块化中原本暴露的名字
    import {addA as increaseA,addB as increaseB,getC as increaseC} from "../js/md4.js";
    import * as _D from "../js/md4.js";

    // 模块之间的变量或方法 => 重名
    // 报错: Identifier 'a' has already been declared
    // import {a,b,c,addA,addB,getC} from "../js/md4.js";

    // 怎么解决? => 自定义模块中的变量名/函数名
    // 1. 在模块暴露时,进行重命名(暴露的是重命名后的变量和方法)
    // 2. 在引入模块时,进行重命名
    console.log(_D);
    console.log(A,B,C);
    console.log(increaseA,increaseB,increaseC);

</script>
</html>